<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft" id="navBar"></van-nav-bar>
        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <view class="pageTop">
                <view class="cartAd">
                    <view class="cartAd_title">{{ navBarTitle }}</view>
                </view>
            </view>
            <view class="tipsContenrt">
                <view class="call">尊敬的用户:</view>
                <view class="text">
                    一旦注销17乐生活账号，您将无法通过17乐生活微信小程序登录渠道查看及找回账户等级、积分、优惠券、地址簿等账号相关数据。同一个手机号90天内只能注销2次。注销后，如涉及订单及账户中余额相关问题，请通过致电4001099902查询及处理。
                </view>
            </view>
        </scroll-view>

        <view class="bottom">
            <view class="middle">
                <van-button type="default" v-if="!checked" @click="gouxuan">注销账号</van-button>
                <van-button type="primary" @click="closeAccount"  v-else>注销账号</van-button>
            </view>
            <!-- <view class="bottom"> -->
                <view class="agreement">
                    <van-checkbox style="width: 20px; height: 20px; line-height: 20px;" icon-size="20px" :value="checked" @change="onChange"
                        shape="squre" checked-color="#ff6203">
                        <!-- <image @click="onChange" slot="icon" class="checked-img"
                            :src="checked ? activeIcon : inactiveIcon" /> -->
                    </van-checkbox>
                    <view id="secrectAgreement" class="secrectAgreement"  @click="onChange">
                        <span>我已阅读并同意</span> <span class="href" @click.stop="toAgreement">《注销协议》</span>
                    </view>
                </view>
            <!-- </view> -->
        </view>
        <van-toast id="van-toast" />
        <closeAccountAgreement :show="show" @closePopup="closePopup"></closeAccountAgreement>
    </view>
</template>

<script>
import Toast from '@/wxcomponents/vant/toast/toast'
import closeAccountAgreement from '@/mycomponents/shangcheng/closeAccountAgreement.vue';
export default {
    props: {},
    components: {
        closeAccountAgreement
    },
    data() {
        return {
            scrolling: false,
            navBarTitle: '注销账号',

            inactiveIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/notChecked1126.png',
            activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',
            disabledIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/disabledIcon.png',


            checked: false,
            show:false

        }
    },

    computed: {},


    watch: {},
    onLoad() { },
    onReady() { },

    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft() {
            uni.navigateBack()
        },
        onChange (e) {
            console.log(e,'e')
            // if (e.type === 'tap') {
                if (e.target.id !== 'secrectAgreement') {
                    this.checked = !this.checked
                }
            // }else{
            //     if (e.target.id !== 'secrectAgreement') {
            //         this.checked = !this.checked
            //     }
            // }

        },
        gouxuan() {
            if (!this.checked) {
                Toast('请先勾选同意服务协议')
                return false
            }
        },
        // 注销账号按钮
        closeAccount() { },
        // 注销协议
        toAgreement(){
            this.show=true
            console.log('lll')
        },
        // closePopup
        closePopup(){
            this.show=false
        }

    },

}
</script>
<style lang="scss" scoped>
// @import '@/styles/variables.scss';

.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
::v-deep .van-button__text {
    // display: inline-block;
    display: flex !important;
    flex-direction: column !important;
}
// 页面标题部分
.cartAd {


}

.cartAd_title {
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    padding: 17px 24px 21px 24px ;
    font-size: 30px;
    text-align: left;
    line-height: 30px;
    color: #111111;
}
.tipsContenrt{
    margin-top: 54rpx;
    padding-left: 48rpx;
    padding-right: 48rpx;
    .call{
        
    }
    .text{
        color: rgba(17,17,17,1);
        font-size: 24rpx;
        text-align: left;
        margin-top: 48rpx;
    }
}

.checked-img {
    height: 18px;
    width: 18px;
}

.agreement {
    margin-top: 40rpx;
    font-size: 24rpx;
    color: #757980;
    display: flex;
    align-items:center;
    justify-content: center;
    text-align: center;
}
.secrectAgreement{
    margin-left: 14rpx;
}
.href {
    color: #ff6203;
}
// 去绑定的按钮
.button{
    // width: 100%;
    font-size: 24rpx;
    color: #ffffff;
    height: 40rpx;
    line-height:40rpx;
    border-radius: 10px;
    border-style: initial !important;
    padding: 0 11px !important;
    background: #FF6203 !important;
    margin-left: 13px;
}

::v-deep .van-button--default {
    width: 100%;
    height: 86rpx;
    border-radius: 38rpx;
    font-size: 28rpx;
    background: #b3b3b3 !important;
    border: none;
    color:#ffffff !important;
}
::v-deep .van-button--primary {
    width: 100%;
    height: 86rpx;
    border-radius: 38rpx;
    font-size: 28rpx;
    background: #FF6203 !important;
    border: 1px solid #ff6203 !important;
}

::v-deep #navBar .van-icon {
    color: #242629 !important;
}
.l10{
    margin-left: 20rpx;
}
.l20 {
    margin-left: 20px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}
</style>

